import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { observer, inject } from "@tarojs/mobx-rn";
import { Form, View, Textarea, Input, Button, Picker, Image } from "@tarojs/components-rn";
import { getRuntime, educationArr, workExperienceArr, monthlyPayArr, typeOfJobArr } from "../../utils/common";
import positionStyleSheet from "./position_styles";
import right from '../../assets/img/right.png';
import { toJS } from "mobx";
var _styleSheet = positionStyleSheet;
let Position = class Position extends Component {
  constructor() {
    super(...arguments);

    this.changeArea = e => {
      let { allProvince, allCity, allDistract, provinceIndex, cityIndex, distractIndex } = this.state;
      this.setState({
        area: allProvince[provinceIndex]['label'] + allCity[cityIndex]['label'] + allDistract[distractIndex]['label']
      });
    };

    this.state = {
      publicationType: '3',
      description: '',
      positionName: '',
      recruitmentArr: Array.from(Array(100), (v, k) => k).filter(item => item > 0),
      recruitment: 1,
      educationArr: educationArr,
      education: educationArr[0],
      workExperienceArr: workExperienceArr,
      workExperience: workExperienceArr[0],
      technicalTitleArr: [],
      technicalTitle: '',
      technicalTitleId: 0,
      monthlyPayArr: monthlyPayArr,
      monthlyPay: monthlyPayArr[0],
      jobNatureArr: typeOfJobArr,
      jobNature: typeOfJobArr[0],
      address: '',
      loading: false,
      disabled: false,
      submitText: '立即发布',
      allProvince: [],
      allCity: [],
      allDistract: [],
      provinceIndex: 0,
      cityIndex: 0,
      distractIndex: 0,
      area: '请选择'
    };
  }
  componentWillMount() {
    Taro.setNavigationBarTitle({ title: '发布职位' });
    this.getAllProvince();
    this.getAllCity(0);
    this.getAllDistract(0, 0);
    this.getAllTechnicalTitle();
  }
  getAllTechnicalTitle() {
    let { TalentStore } = this.props.stores;
    TalentStore.getAllTechnicalTitle({
      callback: res => {
        let resArr = toJS(res);
        console.log(resArr);
        this.setState({
          technicalTitleArr: res.items || [],
          technicalTitle: res.items[0]['titleName'] || '',
          technicalTitleId: res.items[0]['id'] || ''
        });
      }
    });
  }
  getAllProvince() {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        //console.log(res)
        this.setState({
          allProvince: res
        });
      }
    });
  }
  getAllCity(index = 0) {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllCityFromLocal({
      index,
      callBack: res => {
        //console.log(res)
        this.setState({
          allCity: res
        });
      }
    });
  }
  getAllDistract(indexProvince = 0, indexCity = 0) {
    let { AreaStore } = this.props.stores;
    AreaStore.getAllDistractFromLocal({
      indexProvince,
      indexCity,
      callBack: res => {
        //console.log(res)
        this.setState({
          allDistract: res
        });
      }
    });
  }
  // 普通选择器
  changePicker(type, e) {
    this.setState({
      [type]: this.state[type + 'Arr'][e.detail.value]
    });
  }
  // 职称选择
  changeTechnical(e) {
    let index = e.detail.value || 0;
    let { technicalTitleArr: t } = this.state;
    this.setState({
      technicalTitle: t[index]['titleName'],
      technicalTitleId: t[index]['id']
    });
  }
  // 地址选择
  onColumnChange(e) {
    // console.log(e.detail)
    let { column, value } = e.detail;
    if (column === 0) {
      // 选择省
      this.getAllCity(value);
      this.getAllDistract(value, 0);
      this.setState({
        provinceIndex: value
      });
    }
    if (column === 1) {
      this.getAllDistract(this.state.provinceIndex, value);
      this.setState({
        cityIndex: value
      });
    }
    if (column === 2) {
      this.setState({
        distractIndex: value
      });
    }
  }
  formSubmit(e) {
    const { homeStore } = this.props.stores;
    let { publicationType } = this.state;
    let { recruitment, education, workExperience, monthlyPay, jobNature, area, technicalTitleId } = this.state;
    let { positionName, address, description } = e.detail.value;
    if (!positionName) {
      getRuntime().showToast('招聘标题不能为空~');
      return;
    }
    if (!recruitment) {
      getRuntime().showToast('招聘人数不能为空~');
      return;
    }
    if (!monthlyPay) {
      getRuntime().showToast('月薪不能为空~');
      return;
    }
    if (!description) {
      getRuntime().showToast('职位简介不能为空~');
      return;
    }
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    });
    homeStore.saveUserInfomations({
      form: {
        publicationType, positionName, recruitment, education, workExperience, technicalTitleId, monthlyPay, jobNature, address: area, description
      },
      callBack: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即发布'
        });
        getRuntime().showToast('数据提交成功~');
        setTimeout(() => {
          getRuntime().navigateTo('/pages/newest/index');
        }, 2000);
      }
    });
  }
  render() {
    let { recruitment, recruitmentArr, education, educationArr, workExperience, workExperienceArr, technicalTitle, technicalTitleArr, monthlyPay, monthlyPayArr, jobNature, jobNatureArr, loading, disabled, submitText, allProvince, allCity, allDistract, area } = this.state;
    return <View style={_styleSheet["from-wrap"]}>
        <Form onSubmit={this.formSubmit.bind(this)}>
          <View style={_styleSheet["item-group-title"]}>－ 招聘信息 －</View>

          <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>招聘标题</View>
              <Input placeholder="请填写招聘标题(例：一级建造师)" placeholderClass="placeholder_class" name="positionName" style={_styleSheet["from-input"]} />
            </View>

            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>招聘人数</View>
              <Picker mode="selector" name="recruitment" range={recruitmentArr} onChange={this.changePicker.bind(this, 'recruitment')} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{recruitment}</View>
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>

            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>要求学历</View>
              <Picker mode="selector" name="education" range={educationArr} onChange={this.changePicker.bind(this, 'education')} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{education}</View>
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>

            <View style={[_styleSheet["input-group"], _styleSheet["pb0"]]}>
              <View style={_styleSheet["input-name"]}>工作经验</View>
              <Picker mode="selector" range={workExperienceArr} name="workExperience" onChange={this.changePicker.bind(this, 'workExperience')} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{workExperience}</View>
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>


            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>职称</View>
              <Picker mode="multiSelector" name={'technicalTitle'} range={[technicalTitleArr]} rangeKey={'titleName'} onChange={this.changeTechnical.bind(this)} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  {technicalTitle && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{technicalTitle}</View>}
                  {!technicalTitle && <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>请选择</View>}
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>

            <View style={_styleSheet["input-group"]}>
              <View style={[_styleSheet["input-name"], _styleSheet["is-require"]]}>月薪</View>
              <Picker mode="selector" name={'monthlyPay'} range={monthlyPayArr} onChange={this.changePicker.bind(this, 'monthlyPay')} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{monthlyPay}</View>
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>

            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>工作性质</View>
              <Picker mode="selector" name={'jobNature'} range={jobNatureArr} onChange={this.changePicker.bind(this, 'jobNature')} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{jobNature}</View>
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>

            <View style={_styleSheet["input-group"]}>
              <View style={_styleSheet["input-name"]}>工作地点</View>
              <Picker mode="multiSelector" name={'address'} range={[allProvince, allCity, allDistract]} rangeKey={'label'} onChange={this.changeArea.bind(this)} onColumnChange={this.onColumnChange.bind(this)} style={_styleSheet["input-picker"]}>
                <View style={_styleSheet["tt"]}>
                  <View style={[_styleSheet["from-input"], _styleSheet["picker-con"]]}>{area}</View>
                  <Image src={right} style={_styleSheet["drop-down-icon"]} />
                </View>
              </Picker>
            </View>
          </View>
          <View style={_styleSheet["item-group-title"]}>－ 职位简介 －</View>
          <View style={_styleSheet["input-group"]}>
          <Textarea placeholderClass="placeholder-class" placeholder="请详细填写招聘职位的要求和内容(必填)" maxlength={-1} name="description" style={_styleSheet["from-textarea"]} />
          </View>

          <Button formType="submit" loading={loading} disabled={disabled} style={_styleSheet["from-submit"]}>{submitText}</Button>
        </Form>

        <View style={_styleSheet["footer-block"]} />
      </View>;
  }
};
Position = tslib_1.__decorate([inject("stores"), observer], Position);
export default Position;